<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>加入黑名单原因</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="detail">
        <div v-if="form.show" class="form flex-between">
          <el-input v-model="form.content" type="textarea"></el-input>
          <div class="flex">
            <i class="iconfont icon-gou pointer"></i>
            <i class="iconfont icon-guanbi1 pointer" @click="form.show = false"></i>
          </div>
        </div>
        <div v-else class="add-btn flex flex-align-items-center pointer" @click="formShowHandle">
          <i class="iconfont icon-jiahao"></i>
          <span class="font-16">添加备注</span>
        </div>
        <div class="list">
          <div v-for="(item, index) in list" :key="index" class="item">
            <p class="item-top font-14">{{ `${item.time} ${item.userName}` }}</p>
            <p class="item-bottom font-14">{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['close']);

const form = ref({
  content: '',
  show: false
});
const list = ref([
  {
    userName: 'xxx',
    time: '2024-01-25 00:00:00',
    content: 'xxxxxxxxxxxx'
  },
  {
    userName: 'xxx',
    time: '2024-01-25 00:00:00',
    tagName: '基本信息',
    editType: '新增',
    content: 'xxxxxxxxxxxx'
  }
]);

const close = () => {
  emit('close', null);
}
const formShowHandle = () => {
  form.value = {
    content: '',
    show: true
  };
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    width: 420px;
    border-radius: 10px;
    background: #fff;

    .detail {
      padding: 16px 24px;

      .form {
        margin-bottom: 20px;

        &::v-deep {
          textarea {
            width: 300px;
            height: 54px;
          }
        }

        div {
          i {
            font-size: 24px;
            margin-left: 10px;

            &:first-child {
              color: @main-color;
            }

            &:last-child {
              color: #dadada;
            }
          }
        }
      }

      .add-btn {
        margin-bottom: 20px;

        i {
          font-size: 18px;
          color: @main-color;
          margin-right: 5px;
        }

        span {
          color: @main-color;
        }
      }

      .list {
        padding: 10px;
        max-height: 300px;
        overflow-y: auto;

        .item {
          padding-left: 28px;
          padding-bottom: 20px;
          position: relative;

          &:last-child {
            &::before {
              display: none;
            }
          }

          &::before {
            content: "";
            position: absolute;
            left: 4px;
            height: 100%;
            border-left: 2px solid #e4e7ed;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: -1px;
            width: 12px;
            height: 12px;
            background-color: @main-color;
            border-radius: 50%;
          }

          .item-top {
            color: #999;
            margin-bottom: 8px;
          }

          .item-bottom {
            color: #333;
          }
        }
      }
    }
  }
}
</style>
